<template>
  <div :class="['learning-resources', theme]">
    <!-- 导航栏 -->
    <header class="app-header">
      <div class="container">
        <h1 class="logo">WordMaster</h1>
        <nav class="nav-links">
          <router-link to="/Home">首页</router-link>
          <router-link to="/Forum">论坛</router-link>
          <router-link to="/MemorizationSkills">记忆技巧</router-link>
          <router-link to="/LearningResources">学习资源</router-link>
        </nav>
        <div class="theme-toggle">
          <button @click="toggleTheme" class="theme-btn">
            <span v-if="theme === 'light'">🌙 暗黑模式</span>
            <span v-else>☀️ 明亮模式</span>
          </button>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="resource-main">
      <div class="container">
        <!-- 搜索框 -->
        <div class="search-section">
          <div class="search-box">
            <input type="text" placeholder="搜索学习资源..." v-model="searchQuery" @keyup.enter="searchResources">
            <button @click="searchResources" class="search-btn">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg>
            </button>
          </div>
        </div>

        <!-- 资源分类 -->
        <div class="category-tabs">
          <button v-for="category in categories" :key="category.id" :class="{ active: activeCategory === category.id }"
            @click="activeCategory = category.id">
            {{ category.name }}
          </button>
        </div>

        <!-- 资源卡片 -->
        <div class="resource-grid">
          <div v-for="resource in filteredResources" :key="resource.id" class="resource-card">
            <div class="card-image">
              <img :src="resource.image" :alt="resource.title">
              <span class="resource-type">{{ resource.type }}</span>
            </div>
            <div class="card-content">
              <h3>{{ resource.title }}</h3>
              <p class="description">{{ resource.description }}</p>
              <div class="card-meta">
                <span class="level" :class="resource.level.toLowerCase()">
                  {{ resource.level }}
                </span>
                <span class="rating">
                  <span v-for="star in 5" :key="star">
                    ★
                  </span>
                  ({{ resource.rating }})
                </span>
              </div>
            </div>
            <div class="card-actions">
              <a :href="resource.link" target="_blank" class="visit-btn">访问资源</a>
              <button class="save-btn" @click="saveResource(resource)">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
                </svg>
                收藏
              </button>
            </div>
          </div>
        </div>

        <!-- 加载更多 -->
        <div class="load-more" v-if="hasMoreResources">
          <button @click="loadMore" class="load-more-btn">
            加载更多资源
          </button>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="app-footer">
      <div class="container">
        <p>© 2023 WordMaster - 英语学习助手</p>
        <div class="footer-links">
          <a href="#">关于我们</a>
          <a href="#">帮助中心</a>
          <a href="#">隐私政策</a>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { inject } from 'vue'

// 主题切换功能
const theme = inject('theme')
const setTheme = inject('setTheme')

const toggleTheme = () => {
  if (theme.value === 'light') {
    theme.value = 'dark';
  } else {
    theme.value = 'light';
  }
}

// 页面数据
const searchQuery = ref('')
const activeCategory = ref('all')
const displayedResources = ref(6)

// 资源分类
const categories = [
  { id: 'all', name: '全部' },
  { id: 'dictionary', name: '词典工具' },
  { id: 'vocabulary', name: '词汇学习' },
  { id: 'listening', name: '听力练习' },
  { id: 'reading', name: '阅读材料' },
  { id: 'grammar', name: '语法学习' }
]

// 学习资源数据
const resources = ref([
  {
    id: 1,
    title: '牛津高阶词典',
    description: '权威英语学习词典，提供详细释义和例句',
    type: '词典工具',
    category: 'dictionary',
    level: '中级',
    rating: 4.8,
    link: 'https://www.oxfordlearnersdictionaries.com/',
    image: 'https://picsum.photos/300/200?random=1'
  },
  {
    id: 2,
    title: 'Vocabulary.com',
    description: '通过智能练习系统学习英语词汇',
    type: '词汇学习',
    category: 'vocabulary',
    level: '初级',
    rating: 4.5,
    link: 'https://www.vocabulary.com/',
    image: 'https://picsum.photos/300/200?random=2'
  },
  {
    id: 3,
    title: 'BBC Learning English',
    description: 'BBC官方英语学习平台，包含丰富课程资源',
    type: '综合学习',
    category: 'listening',
    level: '高级',
    rating: 4.9,
    link: 'https://www.bbc.co.uk/learningenglish',
    image: 'https://picsum.photos/300/200?random=3'
  },
  {
    id: 4,
    title: 'Grammarly',
    description: '智能英语语法检查和写作助手',
    type: '语法学习',
    category: 'grammar',
    level: '中级',
    rating: 4.7,
    link: 'https://www.grammarly.com/',
    image: 'https://picsum.photos/300/200?random=4'
  },
  {
    id: 5,
    title: 'TED Talks',
    description: '精选TED演讲，提升英语听力和知识',
    type: '听力练习',
    category: 'listening',
    level: '高级',
    rating: 4.8,
    link: 'https://www.ted.com/talks',
    image: 'https://picsum.photos/300/200?random=5'
  },
  {
    id: 6,
    title: 'Newsela',
    description: '新闻文章阅读平台，可调节难度',
    type: '阅读材料',
    category: 'reading',
    level: '中级',
    rating: 4.6,
    link: 'https://newsela.com/',
    image: 'https://picsum.photos/300/200?random=6'
  },
  {
    id: 7,
    title: 'Quizlet',
    description: '创建和分享单词卡片和学习集',
    type: '词汇学习',
    category: 'vocabulary',
    level: '初级',
    rating: 4.4,
    link: 'https://quizlet.com/',
    image: 'https://picsum.photos/300/200?random=7'
  },
  {
    id: 8,
    title: 'Merriam-Webster',
    description: '美国权威词典，提供发音和词源',
    type: '词典工具',
    category: 'dictionary',
    level: '中级',
    rating: 4.7,
    link: 'https://www.merriam-webster.com/',
    image: 'https://picsum.photos/300/200?random=8'
  }
])


// 计算属性
const filteredResources = computed(() => {
  let filtered = resources.value

  // 按分类筛选
  if (activeCategory.value !== 'all') {
    filtered = filtered.filter(resource => resource.category === activeCategory.value)
  }

  // 按搜索词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(resource =>
      resource.title.toLowerCase().includes(query) ||
      resource.description.toLowerCase().includes(query)
    )
  }

  // 限制显示数量
  return filtered.slice(0, displayedResources.value)
})

const hasMoreResources = computed(() => {
  return filteredResources.value.length < resources.value.length
})

// 方法
const searchResources = () => {
  displayedResources.value = 6
}

const loadMore = () => {
  displayedResources.value += 3
}

const saveResource = (resource) => {
  alert(`已收藏: ${resource.title}`)
  // 实际应用中这里可以调用API保存到用户收藏夹
}

// 初始化
onMounted(() => {
  // 可以在这里添加API调用获取资源数据
})
</script>

<style scoped>
/* 基础样式 */
.learning-resources {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s, color 0.3s;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 明亮主题样式 */
.learning-resources.light {
  background-color: #f5f7fa;
  color: #333;
}

/* 暗黑主题样式 - 使用变量 */
.learning-resources.dark {
  background-color: var(--bg-color);
  color: var(--text-color);
}

.learning-resources.dark .app-header,
.learning-resources.dark .app-footer {
  background-color: var(--card-bg);
}

.learning-resources.dark .resource-card {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  box-shadow: var(--shadow);
}

.learning-resources.dark .category-tabs button {
  background-color: var(--card-bg);
  border-color: var(--border-color);
  color: var(--text-color);
}

.learning-resources.dark .category-tabs button:hover {
  background-color: var(--hover-bg);
}

.learning-resources.dark .description {
  color: var(--secondary-color);
}

.learning-resources.dark .level.初级 {
  background-color: #0d47a1;
  color: #bbdefb;
}

.learning-resources.dark .level.中级 {
  background-color: #1b5e20;
  color: #c8e6c9;
}

.learning-resources.dark .level.高级 {
  background-color: #880e4f;
  color: #f8bbd0;
}

.learning-resources.dark .card-actions {
  border-top-color: var(--border-color);
}

.learning-resources.dark .save-btn {
  border-color: var(--border-color);
  color: var(--secondary-color);
}

.learning-resources.dark .save-btn:hover {
  background-color: var(--hover-bg);
  color: var(--text-color);
}

/* 导航栏样式 */
.app-header {
  background-color: #4a6da7;
  color: white;
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.app-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.nav-links a:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.theme-btn {
  background-color: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background-color 0.2s;
}

.theme-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* 主要内容样式 */
.resource-main {
  flex: 1;
  padding: 30px 0;
}

.search-section {
  margin-bottom: 30px;
}

.search-box {
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 30px;
  overflow: hidden;
}

.search-box input {
  flex: 1;
  padding: 12px 20px;
  border: none;
  font-size: 16px;
  outline: none;
}

.search-btn {
  background-color: #4a6da7;
  color: white;
  border: none;
  padding: 0 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 分类标签样式 */
.category-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.category-tabs button {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #ddd;
  background-color: white;
  cursor: pointer;
  transition: all 0.2s;
}

.category-tabs button.active {
  background-color: #4a6da7;
  color: white;
  border-color: #4a6da7;
}

.category-tabs button:hover {
  background-color: #f0f0f0;
}

.category-tabs button.active:hover {
  background-color: #3a5a8a;
}

/* 资源卡片网格 */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.resource-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
}

.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.card-image {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.resource-card:hover .card-image img {
  transform: scale(1.05);
}

.resource-type {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(74, 109, 167, 0.9);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.card-content {
  padding: 20px;
  flex: 1;
}

.card-content h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
}

.description {
  color: #666;
  margin: 0 0 15px;
  line-height: 1.5;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}

.level {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.level.初级 {
  background-color: #e3f2fd;
  color: #1976d2;
}

.level.中级 {
  background-color: #e8f5e9;
  color: #388e3c;
}

.level.高级 {
  background-color: #fce4ec;
  color: #d81b60;
}

.rating {
  color: #ff9800;
  font-size: 14px;
}

.card-actions {
  display: flex;
  border-top: 1px solid #eee;
  padding: 15px 20px;
}

.visit-btn {
  flex: 1;
  background-color: #4a6da7;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
  transition: background-color 0.2s;
}

.visit-btn:hover {
  background-color: #3a5a8a;
}

.save-btn {
  background-color: transparent;
  border: 1px solid #ddd;
  color: #666;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
}

.save-btn:hover {
  background-color: #f5f5f5;
  color: #333;
}

/* 加载更多按钮 */
.load-more {
  text-align: center;
  margin-top: 20px;
}

.load-more-btn {
  background-color: #4a6da7;
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.2s;
}

.load-more-btn:hover {
  background-color: #3a5a8a;
}

/* 页脚样式 */
.app-footer {
  background-color: #4a6da7;
  color: white;
  padding: 20px 0;
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
}

.footer-links a {
  color: white;
  text-decoration: none;
  transition: opacity 0.2s;
}

.footer-links a:hover {
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .resource-grid {
    grid-template-columns: 1fr;
  }

  .app-header .container {
    flex-direction: column;
    gap: 15px;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }
}
</style>
